<template>
  <YsRow>
    <div class="info-title">
      检测结果
    </div>
    <div class="info-content" v-for="(ele, index) in data" :key="index">
      <div class="span-title">设备{{ index + 1 }}</div>
      <div class="photos-table border_style" v-if="ele.form.length >= 6">
        <div class="border_style photos-row" v-for="(item, index) in ele.form.slice(0, 6)" :key="index">
          <div class="photos-col photos-col1 border_style text_01">
            {{ item.field_name }}
          </div>
          <div class="td_ws photos-col photos-col1 text_01">
            <span class="text_01">
              {{ item.value }}
            </span>
          </div>
        </div>
      </div>
      <div class="photos-table column2 border_style" v-if="ele.form.length >= 6">
        <div class="border_style photos-row" v-for="(item, index) in ele.form.slice(6)" :key="index">
          <div class="photos-col photos-col1 border_style text_01" :class="[index === 1 ? 'photos-col2' : '']">
            {{ item.field_name }}
          </div>
          <div class="photos-col photos-col1 text_01" :class="[index === 1 ? 'photos-col3' : '']">
            <span class="text_01">
              {{ item.value }}
            </span>
          </div>
        </div>
      </div>
      <YsTable :columns="tableColumn" border width="100%" :data="ele.data">
      </YsTable>
    </div>
  </YsRow>
</template>
<script>
export default {
  name: 'jcResult',
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          {
            form: [],
            data: []
          }
        ]
      }
    }
  },
  data() {
    return {
      tableColumn: [
        {
          title: "序号",
          width: 80,
          tooltip: true,
          render: (h, params) => {
            return h("span", params.index + 1)
          },
        },
        {
          title: "焊口(焊缝编号)",
          minWidth: 100,
          key: "pd_name",
          tooltip: true
        },
        {
          title: "规格mm",
          key: "pd_code",
          minWidth: 100,
          tooltip: true
        },
        {
          title: "材质",
          key: "pd_code",
          minWidth: 100,
          tooltip: true
        },
        {
          title: "焊工号",
          key: "pd_code",
          minWidth: 100,
          tooltip: true
        },
        {
          title: "底片数量",
          key: "pd_code",
          minWidth: 100,
          tooltip: true
        },
        {
          title: "焊口等级",
          key: "pd_code",
          minWidth: 100,
          tooltip: true
        },
        {
          title: "检测结果",
          key: "pd_code",
          minWidth: 100,
          tooltip: true
        },
      ]
    }
  },
  methods: {
  }
}
</script>
<style scoped lang='less'>
.info-title {
  font-weight: 500;
  padding: 10px 0;
  color: #423b3b;
  font-size: 18px;
  margin-top: 30px;
  font-family: PingFang SC-Medium, PingFang SC;
}
.info-content {
  .span-title {
    background: #F5F7FA;
    height: 55px;
    border-radius: 3px 3px 0px 0px;
    font-weight: 500;
    color: #405580;
    padding-left: 20px;
    line-height: 55px;
    border: 1px solid #CFD7E5;
    border-bottom: none;
  }
  .photos-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 58px;
    border: 1px solid #e1e6f0;
    border-right: none;
    .photos-row {
      margin-bottom: -1px;
      display: flex;
      border-bottom: 1px solid #cfd7e5;
    }
    .photos-row:nth-child(3n) {
      border-right: none;
    }
    .photos-col {
      width: 50%;
      height: 100%;
      font-size: 16px;
      line-height: 58px;
      padding: 0 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .photos-col1 {
      border-right: 1px solid #e1e6f0;
    }
    /deep/ .photos-col2 {
      width: 25%;
    }
    /deep/ .photos-col3 {
      width: 75%;
    }
  }
  .column2 {
    grid-template-columns: 1fr 2fr;
    border-top: none;
    border-right: none;
    border-bottom: none;
  }
  .td_ws {
    max-width: 350px !important;
  }
}
</style>
